<template>


    <div>
        <div @click="goMy" id="goMy">退出</div>
        <ul>
            <li v-for="item in collectList">
                <div class="bottom">
                    <div class="left">
                        <img
                                class="imgs"
                                :src="item.menuImg"
                                alt=""
                        />
                    </div>
                    <div class="right">
                        <div class="shang">
                            <span class="span1">{{item.restaurant.restaurantName}}</span><br />
                            <span class="span1">{{item.dishName}}</span><br />
                            <span class="span2">{{item.price}}元{{item.unit}}</span>
                            <span class="out" @click="outCollect(item.mid)">取消收藏</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>


    export default {
        components: {

        },
        props:{
            collectList: {
                type: Array,
                required: true
            }
        },
        data(){
            return{

            }
        },
        created() {

        },
        methods:{
            // 退出
            goMy(){
                this.$router.push("/index/my");
            },
            // 查询当前用户所有的收藏信息
            onSubmit() {
                var token = sessionStorage.getItem("token");
                this.$http.post("/collect/collect/CollectSelect").then(result => {
                    console.log(result)
                    this.collectList = result.data.data;
                })
            },
            // 根据菜品id删除数据
            outCollect(mid){
                this.$http.post("/collect/collect/delectCollect?mid="+mid).then(result=>{
                    console.log(result);
                    //alert(result.data.msg);
                    this.onSubmit();
                })
            },
        }
    }
</script>

<style scoped>

    #goMy{

        margin-top: 5%;
        margin-block: 5%;
        padding-left: 5%;
        font-size: 20px;
        font-family: 华文琥珀;
        color: blue;

    }
    .out{
        display:block;
        text-align: right;
    }
    .imgs {
        width: 100%;
        height: 100%;
    }
    .span2 {
        margin-top: 2.6667vw;
    }
    .span1 {
        font-size: 4.3667vw;
    }
    .shang {
        width: 80%;
        height: 15.3333vw;
     /*border: red 1px solid;*/
        margin-top: 4.6667vw;
        margin-left: 5vw;
    }
    .right {
        width: 75%;
        height: 100%;
    /*background-color: green;*/
        float: left;
    }
    .left {
        width: 25%;
        height: 100%;
     /*background-color: yellow;*/
        float: left;
    }
    .bottom {
        width: 90%;
        height: 24.6667vw;
     /*background-color: aquamarine;*/
        margin-top: 2.6667vw;
        margin-left: 5%;
        overflow: hidden;
        border: #e74e40 1px solid;
    }
</style>